<template>
  <div id="_completeTaskLay" class="smallLay">
    <div class="smallLayTitle">
      <b>{{bpmcoreI18n.titleTaskSubmit }}-{{bpmcoreI18n.textOtherUsers}}</b></div>
    <div class="smallLayContent showCompleteTaskSmallLayContent" >
      <span v-for="(val,i) in target.nextUsers" :key="i">
        <br v-if="i>0">
        {{val.displayName}}&nbsp;&nbsp;&nbsp;{{val.deptName}}
      </span>
      <span id="_completeTaskErrorMsg" style="font-size:10pt;color:red;font-weight:bold;margin-left:20px"></span>
      <div>
        <textarea class="commentsTxtare" id="_completeTaskCommentsId" style="height: 25px;width: 550px;" @click="commentsClick" @blur="commentsBlur"
                  maxlength="300" v-model="displayComments"></textarea>
        <div style="text-align:right;padding-right:5px"><font color="blue" id="_completeTaskRemnant">({{showInputLength}}/300)</font>
        </div>
      </div>
      <div style="text-align:center">
        <input type="button" data-ext="okBtn" id="divLayOKBtn" :value="bpmcoreI18n.btnOk"
               v-show="okBtnShow"
               @click="completeTaskOKBtnClicked">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" :value="bpmcoreI18n.btnCancel"
               @click="completeTaskCancelBtnClicked"></div>
    </div>
  </div>
</template>
<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: 'bpmDSubmittaskdialog',
  data () {
    return {
      okBtnShow: true
    }
  },
  computed: {
    ...mapState(['bpmcoreI18n', 'bizData', 'comments', 'targetUsers', 'comments', 'target', 'lang', 'approvalType', 'approvalTypeEnum']),
    showInputLength: function () {
      return this.comments.length + ''
    },
    displayComments: {
      get () {
        return this.comments
      },
      set (value) {
        this.setComments(value)
      }
    }
  },
  props: {},
  methods: {
    ...mapActions(['setComments', 'setIsConfirmVerify', 'setIsSubmitVerify', 'startProcess', 'setIsStartProc', 'setIsFlowDialogVisible']),

    completeTaskOKBtnClicked () {
      this.okBtnShow = false
      this.$store.state.totalShadeShow = true
      setTimeout(() => {
        this.setIsSubmitVerify(false)
        this.$emit('completeTaskOKBtnClicked')
      }, 100)
    },
    completeTaskCancelBtnClicked () {
      this.okBtnShow = true
      // 点击取消，隐藏dialog,校验位置为false，防止首次成功后续失败的情况
      this.setIsFlowDialogVisible(false)
      this.setIsSubmitVerify(false)
      this.setIsConfirmVerify(false)
    },
    commentsClick () {
      console.log('comments clicked before>>>>>>>>>>>>', this.comments)
      if (this.comments === '同意' || this.comments.toUpperCase() === 'OK' || this.comments === '同意@OK') {
        this.setComments('')
      }
      console.log('comments clicked after>>>>>>>>>>>>', this.comments)
    },
    commentsBlur () {
      console.log('comments blur before>>>>>>>>>>>>', this.comments)
      if (this.comments === '') {
        if (this.lang === 'zh') {
          this.setComments('同意')
        } else {
          this.setComments('OK')
        }
      }
      console.log('comments blur after>>>>>>>>>>>>', this.comments)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.smallLay {
  width: 600px;
  height: 194px;
  background-color: #cbd3e0;
  border: 1px solid #909497;
  color: #333;
  line-height: 24px;
  text-align: left;
  -webkit-box-shadow: 5px 2px 6px #000;
}
.smallLayTitle {
  background: url(/static/images/ecsbpm/smallLayBG.jpg) repeat-x center top;
  height: 32px;
  color: #48515a;
}
.smallLayTitle b {
  padding-left: 12px;
  color: #48515a;
  font-size: 14px;
  line-height: 33px;
}
.smallLayContent {
  background-color: #fff;
  border: 1px solid #9da4be;
  height: 131px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 12px;
}
.showCompleteTaskSmallLayContent {
  overflow: auto;
}
</style>
